<template>
  <div class="rights-box">
       <el-card shadow="never">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }">权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>权限列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-card> 

        <div class="rights-table">
            <el-table
                :data="rightsList"
                border
                style="width: 100%">
                <el-table-column
                type="index"
                label="#"
                width="50">
                </el-table-column>
                <el-table-column
                prop="authName"
                label="名称"
                width="180">
                </el-table-column>
                <el-table-column
                label="访问路径">
                <template slot-scope="scoped">
                    <el-tag type="info">{{scoped.row.path}}</el-tag>
                </template>
                </el-table-column>
                <el-table-column
                label="权限级别"
                width="180">
                <template slot-scope="scoped">
                    <el-tag :type="scoped.row.level == 0 ? 'success' : scoped.row.level == 1 ?  'warning' : '' ">
                        {{ scoped.row.level == 0 ? '一级' : scoped.row.level == 1 ?  '二级' : '三级' }}
                    </el-tag>
                </template>
                </el-table-column>
            </el-table>
        </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            rightsList: []
        }
    },
    created() {
        this.getRightsList()
    },
    methods: {
        async getRightsList() {
            const {data} = await this.$http({
                method: 'GET',
                url: '/rights/list'
            })

            if(data.meta.status !== 200) {
                return this.$message({
                    type: 'error',
                    message: data.meta.msg
                })
            }

            this.rightsList = data.data
        }
    }
}
</script>

<style scoped lang="less">
.rights-box{
    .rights-table{
        padding: 10px 20px ;
    }
}
</style>